import React, { Component } from "react";
import './App.css';

export default class App extends Component {

  state = {
    r: 0,
    g: 0,
    b: 0
  }

  render() {
    //结构赋值
    let {r,g,b} = this.state;

    return (
      <div className="huaban">
        <div className="show" style={{background: `rgb(${r}, ${g}, ${b})`}}>

        </div>
        <div className="control">
          R: <input name="r" type="range" min='0' max='255' value={r}  onChange={this.change}  /><br />
          G: <input name="g" type="range" min='0' max='255' value={g}  onChange={this.change}  /><br />
          B: <input name="b" type="range" min='0' max='255' value={b}  onChange={this.change}  /><br />
        </div>
      </div>
    );
  }

  change = (e) => {
    //修改状态
    this.setState({
      [e.target.name]: e.target.value
    })
  }

}
